<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item>
        <el-button-group style="margin-right: 6px">
          <el-button
            :icon="ArrowRight"
            type="info"
            @click="closeRowExpansion"
            plain
          >
            折叠
          </el-button>
          <el-button
            :icon="ArrowDown"
            type="info"
            @click="openRowExpansion"
            plain
          >
            展开
          </el-button>
        </el-button-group>
        <el-button :icon="Search" @click="getTableData" />
        <el-button
          type="primary"
          @click="editFormVisible = true"
          plain
          style="margin-left: 5px"
        >
          + 新增
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #state="{ row }">
          {{ row.state == 1 ? "启用" : "禁用" }}
        </template>
        <template #edit="{ row }">
          <el-button
            size="small"
            :style="{
              visibility: row?.parentId !== '0' ? 'hidden' : 'visible',
            }"
            :disabled="row?.parentId !== '0'"
            :icon="Plus"
            type="primary"
            plain
            @click="add(row)"
          >
            子菜单
          </el-button>
          <el-button
            size="small"
            :icon="Edit"
            plain
            type="warning"
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            :icon="Delete"
            type="danger"
            plain
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>

    <MenuEditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      :parent-menu-option="tableData.data"
      @submit="getTableData"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { deleteSysMenu, selectMenuList, selectSysMenuById } from "@/api/system";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import MenuEditForm from "@/views/systemManage/menu/components/MenuEditForm.vue";
import {
  ArrowDown,
  ArrowRight,
  Delete,
  Edit,
  Plus,
  Search,
} from "@element-plus/icons-vue";

let rowData: any;
let filterData = reactive({ name: "" });
const editFormVisible = ref<boolean>(false);
const tableRef = ref();
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});

const tableData = reactive({
  columns: [
    { label: "菜单名称", prop: "menuName", width: 230, align: "left" },
    { label: "路由地址", prop: "menuUrl", width: 200, align: "left" },
    { label: "组件路径", prop: "component", width: 300, align: "left" },
    { label: "排序", prop: "sort", width: 60 },
    { label: "状态", prop: "state", template: true, width: 70 },
    { prop: "edit", label: "操作", template: true, width: 280 },
  ],
  loading: true,
  total: 0,
  data: [],
});

async function getTableData() {
  tableData.loading = true;
  const { data, success, msg } = await selectMenuList(filterData);
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  tableData.loading = false;
  tableData.data = data;
  tableData.total = data?.total;
}

async function add(row: any) {
  rowData = { parentId: row.id };
  editFormVisible.value = true;
}

async function edit(row: any) {
  const { data, success } = await selectSysMenuById({ id: row?.id });
  if (!success) {
    return;
  }
  rowData = data;
  editFormVisible.value = true;
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    tableData.loading = true;
    const { success, msg } = await deleteSysMenu({ id: row?.id });
    if (!success) {
      tableData.loading = false;
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await getTableData();
  });
}

const TabData = (data: any[], status: any) => {
  //循环数据赋值
  data.forEach((i: any) => {
    tableRef.value.elTableRef.toggleRowExpansion(i, status);
    if (i.children) {
      forArr(i.children, status);
    }
  });
};

const forArr = (arr: any[], status: any) => {
  //关闭展开逻辑
  arr.forEach((i: any) => {
    tableRef.value.elTableRef.toggleRowExpansion(i, status);
    if (i.children) {
      forArr(i.children, status);
    }
  });
};

const openRowExpansion = () => {
  //展开
  TabData(tableData.data, true);
};

const closeRowExpansion = () => {
  //关闭
  TabData(tableData.data, false);
};

watch(pageData, async () => {
  await getTableData();
});

watch(filterData, async () => {
  pageData.pageNum = 1;
  await getTableData();
});

onMounted(async () => {
  await getTableData();
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
